<html>
<head>
<link href="../../s/toastr/2.1.3/css/toastr.css" rel="stylesheet" />
<meta charset="UTF-8">
<title>toastr-demo</title
</head>
<body>

	<button onclick="clickFn(1)">常规</button>
	<button onclick="clickFn(2)">成功</button>
	<button onclick="clickFn(3)">警告</button>
	<button onclick="clickFn(4)">错误</button>
	<button onclick="clickFn(5)">带标题</button>
	<button onclick="clickFn(6)">常规2</button>

	<script src="../../s/jquery/1.11.1/jquery.min.js"></script>
	<script src="../../s/toastr/2.1.3/js/toastr.js"></script>
	<script type="text/javascript">
		toastr.options = {
			closeButton : false,//是否显示关闭按钮（提示框右上角关闭按钮） 
			debug : false,//是否为调试
			progressBar : true,//是否显示进度条
			//toast-top-left|toast-top-right|toast-top-center|toast-top-full-width
			//toast-botton-right|toast-bottom-left|toast-bottom-center|toast-bottom-full-width
			positionClass : "toast-top-right",//消息框在页面显示的位置
			onclick : null,//点击消息框自定义事件 
			showDuration : "300",//显示动作时间 
			hideDuration : "1000",//隐藏动作时间 
			timeOut : "2000",
			extendedTimeOut : "1000",//自动关闭超时时间 
			showEasing : "swing",
			hideEasing : "linear",
			showMethod : "fadeIn",//显示的方式，和jquery相同 
			hideMethod : "fadeOut"//隐藏的方式，和jquery相同
		};

		var clickFn = function(type) {

			switch (type) {
			case 1:
				//常规消息提示，默认背景为浅蓝色  
				toastr.info("你有新消息了!");
				break;
			case 2:
				//成功消息提示，默认背景为浅绿色 
				toastr.success("你有新消息了!");
				break;
			case 3:
				//警告消息提示，默认背景为橘黄色 
				toastr.warning("你有新消息了!");
				break;
			case 4:
				//错误消息提示，默认背景为浅红色 
				toastr.error("你有新消息了!");
				break;
			case 5:
				//带标题的消息框
				toastr.success("你有新消息了!", "消息提示");
				break;
			default:
				//另一种调用方法
				toastr["info"]("你有新消息了!", "消息提示");
				break;
			}
		}
	</script>

</body>

</html>